/* eslint-disable jsx-a11y/alt-text */
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actions from './redux/actions';
import hualogo from '../../images/m_hualogo.png';
import { Icon } from 'antd-mobile';
import "../../styles/iconfont/iconfont.css"
export class DefaultPage extends Component {
  static propTypes = {
    login: PropTypes.object.isRequired,
    actions: PropTypes.object.isRequired
  };

  constructor(props) {
    super(props)
    this.state = {
      telText: "",
      yzmText: ""
    }
    this.inpChange = this.inpChange.bind(this)
    this.yamChange = this.yamChange.bind(this)
    this.clearTel = this.clearTel.bind(this)
    this.clearText = this.clearText.bind(this)
  }
  render() {
    let { telText, yzmText } = this.state
    return (
      <div className="login-default-page">
        {/* 顶部标题 */}
        <div className="header-bar">
          <div className="header-bar-left">
            <i className="iconfont icon-closed"></i>
          </div>
        </div>
        {/* 中间内容 */}
        <div className="container">

          {/* 图片login */}
          <div className="hualogo">
            <img src={hualogo} />
          </div>
          {/* 输入框 */}
          <div className="formgroup">
            <div className="formgroup-input">
              <input placeholder="请输入手机号" type="tel" maxLength="11" value={telText} onChange={this.inpChange} />
            </div>
            <div className={`formgroup-input-icon ${telText ? '' : 'dsn'}`} onClick={this.clearTel}>
              <Icon type="cross-circle-o" size="xxs"></Icon>
            </div>
          </div>
          <div className="formgroup">
            <div className="formgroup-input">
              <input placeholder="请输入短信验证码" type="text" value={yzmText} onChange={this.yamChange} />
              <div className={`formgroup-input-icon ${yzmText ? '' : 'dsn'}`} onClick={this.clearText}>
                <Icon type="cross-circle-o" size="xxs"></Icon>
              </div>
            </div>
            <div className="formgroup-btn">
              获取验证码
            </div>
          </div>

          {/* 按钮 */}
          <div className="form-contrl">
            <button className="formbtn">手机登陆 / 注册</button>
          </div>

          <div className="flex">
            <div className="flex-item">
              账号密码登录<Icon type="right" />
            </div>

            <div className="flex-item rigth">
              注册<Icon type="right" />
            </div>
          </div>

        </div>

        {/* 其它登录方式 */}
        <div className="thirdparty-login">
          <div className="thirdparty-login-item">
            <i className="iconfont icon-qq"></i>
            <span>QQ</span>
          </div>
          <div className="thirdparty-login-item">
            <i className="iconfont icon-zhifubao"></i>
            <span>支付宝</span>
          </div>
        </div>
      </div>
    );
  }

  inpChange(event) {
    // console.log(event)
    this.setState({
      telText: event.target.value,
    })
  }
  yamChange(event) {
    console.log(event)
    this.setState({
      yzmText: event.target.value
    })
  }

  clearTel(event) {
    console.log(event)
    this.setState({
      telText: ""
    })
  }

  clearText() {
    this.setState({
      yzmText: ""
    })
  }

}

/* istanbul ignore next */
function mapStateToProps(state) {
  return {
    login: state.login,
  };
}

/* istanbul ignore next */
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({ ...actions }, dispatch)
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(DefaultPage);
